{% extends 'base.html' %}
{% block title %}
{% endblock %}
{% block css %}
<style>
    .collect{
        display: inline-block;
        width: 30px;
        height: 30px;
        float: right;
        margin-right: 20px;
        background-position: center;
    }
</style>
{% endblock %}
{% block body %}
<div><img src="/media/{{ books.image.image }}"></div>
{{ books.category.title }}
作者：{{ books.author.title }}
更新时间：{{ books.update_time }}
<div>
    <div class="panel-heading">
    {% if request.user.is_authenticated  %}
    <h3 class="panel-title">{{ books }}<span class="collect" style="background-image: url(/static/img/collect1.png);"></span> </h3>
    {% else %}
    <h3 class="panel-title">{{ books }}<span class="collect" style="background-image: url(/static/img/collect2.png);"></span> </h3>
    {% endif %}
    {% csrf_token %}
  </div>
</div>
<div>
    <div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#synopsis" aria-controls="synopsis" role="tab" data-toggle="tab">简介</a></li>
          <li role="presentation"><a href="#chapter" aria-controls="chapter" role="tab" data-toggle="tab">章节</a></li>
        </ul>
      
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="synopsis">{{ books.synopsis }}</div>
          <div role="tabpanel" class="tab-pane" id="chapter">
            <ul class="row">
                {% for i in chapter %}
                        <li class="col-md-4"><a href="/detail/{{ books.id }}/chapter/{{ i.id }}">{{ i }}</a></li>
                {% endfor %}
            </ul>
          </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
<script>
  $(function(){
    $(".collect").click(function(){
      if("{{ request.user.id }}"=="None"){
        location.href = "/user/login?next=/detail/{{ books.id }}"
        return ;
      }

      $.ajax({
        url: "/bookshelf/change_collect/",
        method: "post",
        data:{
          "csrfmiddlewaretoken": $("[type='hidden']").val(),
          "books_id": "{{ books.id }}"
        },
        success:function(data){
          if(data.data.state){
            $(".collect").css({
              "background-image": "url(/static/img/collect2.png)"
            })
          }
          else
          {
            $(".collect").css({
              "background-image": "url(/static/img/collect1.png)"
            })
          }
        }
      });
    })
  })
</script>
{% endblock %}